<template>
  <div>
    <!-- 市场洞察 产品分析 -->
    <div class="topBanner">
      <br />

      <div class="search_button">
        <p class="p">市场洞察·产品分析</p>
        <div class="searchAuto">
          <input style="width: 100%; height: 100%; border: 0" />
        </div>
        <div style="position: relative">
          <!-- <div class="search_btn">
            <img src="../../assets/img/sousuo.png" />
            <span style="color: #fff; font-size: 22px; font-weight: 400">
              查询
            </span>
          </div> -->
        </div>
      </div>
    </div>

    <div class="echarts">
      <!-- 产品大数据分析 -->
      <div class="Data"></div>

      <!-- 中招标分析 -->
      <div class="analysis">
        <!-- tab标签页 -->
        <!-- <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="中招标分析" name="first">中招标分析</el-tab-pane>
          <el-tab-pane label="销量分析" name="second">销量分析</el-tab-pane>
        </el-tabs> -->
      </div>

      <!-- 数据概览 -->
      <div class="overview">
        <!-- 文字 -->
        <div style="height: 56px; border-bottom: 1px solid #eee">
          <div class="df" style="padding-top: 20px">
            <span class="xian"></span>
            <span class="text">数据概览</span>
          </div>
        </div>
        <!-- 背景图片展示 -->
        <div class="bacBox">
          <div class="baCorder"></div>
          <div class="bacBillion"></div>
          <div class="bacInd"></div>
          <div class="bacfamily1"></div>
          <div class="bacfamily2"></div>
        </div>
      </div>

      <!-- 市场规模 -->
      <div class="scale">
        <!-- 文字 -->
        <div style="height: 56px; border-bottom: 1px solid #eee">
          <div class="df" style="padding-top: 20px">
            <span class="xian"></span>
            <span class="text">市场规模</span>
          </div>
        </div>
      </div>

      <!-- 市场供需数量 -->
      <div class="scale">
        <!-- 文字 -->
        <div style="height: 56px; border-bottom: 1px solid #eee">
          <div class="df" style="padding-top: 20px">
            <span class="xian"></span>
            <span class="text">市场供需数量</span>
          </div>
        </div>
      </div>

      <!-- 市场地域分布 -->
      <div class="translate">
        <!-- 文字 -->
        <div style="height: 56px; border-bottom: 1px solid #eee">
          <div class="df" style="padding-top: 20px">
            <span class="xian"></span>
            <span class="text">市场地域分布</span>
          </div>
        </div>
      </div>

      <!-- 各类采购商采购次数占比大盒子 -->
      <div class="numberBox">
        <!-- 各类采购商采购次数占比 -->
        <div class="left_bing">
          <!-- 文字 -->
          <div style="height: 56px; border-bottom: 1px solid #eee">
            <div class="df" style="padding-top: 20px">
              <span class="xian"></span>
              <span class="text">各类采购商采购次数占比</span>
            </div>
          </div>
        </div>

        <!-- 各类采购商采购金额占比 -->
        <div class="right_bing">
          <!-- 文字 -->
          <div style="height: 56px; border-bottom: 1px solid #eee">
            <div class="df" style="padding-top: 20px">
              <span class="xian"></span>
              <span class="text">各类采购商采购金额占比</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 主要品牌分布大盒子 -->
      <div class="numberBox1">
        <!-- 主要品牌分布 -->
        <div class="left_bing">
          <!-- 文字 -->
          <div style="height: 56px; border-bottom: 1px solid #eee">
            <div class="df" style="padding-top: 20px">
              <span class="xian"></span>
              <span class="text">数据概览</span>
            </div>
          </div>
        </div>

        <!-- 品牌销量 -->
        <div class="right_bing">
          <!-- 文字 -->
          <div style="height: 56px; border-bottom: 1px solid #eee">
            <div class="df" style="padding-top: 20px">
              <span class="xian"></span>
              <span class="text">品牌销量</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 采购商排行大盒子 -->
      <div class="Purchaser">
        <!-- 采购商排行 -->
        <div class="left_1">
          <!-- 文字 -->
          <div style="height: 56px; border-bottom: 1px solid #eee">
            <div class="df" style="padding-top: 20px">
              <span class="xian"></span>
              <span class="text">采购商排行</span>
            </div>
          </div>
        </div>

        <!-- 供应商排行 -->
        <div class="center_1">
          <!-- 文字 -->
          <div style="height: 56px; border-bottom: 1px solid #eee">
            <div class="df" style="padding-top: 20px">
              <span class="xian"></span>
              <span class="text">供应商排行</span>
            </div>
          </div>
        </div>

        <!-- 招标代理机构排行 -->
        <div class="right_1">
          <!-- 文字 -->
          <div style="height: 56px; border-bottom: 1px solid #eee">
            <div class="df" style="padding-top: 20px">
              <span class="xian"></span>
              <span class="text">招标代理机构排行</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import "../../assets/com/com.scss";
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
:deep(.el-menu--horizontal > .el-menu-item) {
  width: 120px !important;
}

:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title) {
  width: 152px !important;
}
.topBanner {
  width: 100%;
  margin: 0 auto;
  // margin-top: -20px;
  height: 154px;
  background: url(../../assets/img/banner11.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  p {
    margin-left: 545px;
    // margin-top: 16px;
    font-size: 22px;
    font-weight: 400;
    line-height: 0;
    color: #ffffff;
  }
  .search_button {
    width: 100vw;
    height: 154px;
    // margin: 0 auto;
    // position: relative;
    .p {
      width: 188px;
      height: 22px;
      font-size: 22px;
      font-weight: 400;
      color: #ffffff;
      margin-top: 26px;
      box-sizing: border-box;
    }
    .searchAuto {
      width: 850px;
      height: 60px;
      margin: 0 auto;
      input {
        border: 0;
        outline: none;
        padding-left: 20px;
        border-radius: 50px;
      }
    }
    .search_btn {
      width: 120px;
      height: 56px;
      background: #6675ff;
      margin-top: 10px;
      border-radius: 50px;
      border: 0;
      line-height: 56px;
      text-align: center;
      cursor: pointer;
      img {
        margin-bottom: 5px;
        width: 21px;
        height: 21px;
        margin-right: 4px;
      }
    }
  }
}

.echarts {
  //产品大数据分析
  .Data {
    width: 1200px;
    height: 122px;
    background: #ffffff;
    border: 1px solid red;
    margin: 0 auto;
    margin-top: 10px;
  }

  // 中招标分析
  .analysis {
    width: 1200px;
    height: 56px;
    background: #ffffff;
    border: 1px solid red;
    margin: 0 auto;
    margin-top: 10px;
  }

  //数据概览
  .overview {
    width: 1200px;
    height: 216px;
    background: #ffffff;
    border: 1px solid red;
    // margin: 0 auto;
    margin: 0 auto;
    margin-top: 10px;

    .bacBox {
      display: flex;
      .baCorder {
        width: 220px;
        height: 120px;
        background: url(../../assets/img/1.1.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;
      }
      .bacBillion {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/2.2.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;
      }
      .bacInd {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/3.3.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;
      }
      .bacfamily1 {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/4.4.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;
      }
      .bacfamily2 {
        width: 202px;
        height: 120px;
        background: url(../../assets/img/5.5.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0 0 20px;
      }
    }
  }

  // 市场规模
  .scale {
    width: 1200px;
    height: 480px;
    background: #ffffff;
    border: 1px solid red;
    margin: 0 auto;
    margin-top: 10px;
  }

  // 市场供需数量
  .scale1 {
    width: 1200px;
    height: 480px;
    background: #ffffff;
    border: 1px solid red;
    margin-top: 10px;
  }

  //市场地域分布
  .translate {
    width: 1200px;
    height: 680px;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 10px;
    border: 1px solid red;
  }

  // 各类采购商采购次数占比大盒子
  .numberBox {
    width: 1200px;
    display: flex;
    margin: 10px;
    margin: 10px auto;
    // 各类采购商采购次数占比
    .left_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
      border: 1px solid red;
      // margin-left: 350px;
    }
    // 各类采购商采购金额占比
    .right_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
      border: 1px solid red;
      margin-left: 10px;
    }
  }
  // 主要品牌分布大盒子
  .numberBox1 {
    width: 1200px;
    display: flex;
    margin: 10px;
    margin: 10px auto;

    // 主要品牌分布
    .left_bing {
      width: 595px;
      height: 550px;
      border: 1px solid red;
      background: #ffffff;
      // margin-left: 350px;
    }
    // 品牌销量
    .right_bing {
      width: 595px;
      height: 550px;
      background: #ffffff;
      border: 1px solid red;
      margin-left: 10px;
    }
  }

  // 采购商排行大盒子
  .Purchaser {
    width: 1200px;
    display: flex;
    margin-top: 15px;
    margin: 0 auto;
    .left_1 {
      width: 390px;
      height: 650px;
      background: #ffffff;
      border: 1px solid red;
    }
    .center_1 {
      width: 390px;
      height: 650px;
      border: 1px solid red;
      background: #ffffff;
      margin-left: 15px;
    }

    .right_1 {
      width: 390px;
      height: 650px;
      border: 1px solid red;
      background: #ffffff;
      margin-left: 15px;
    }
  }
}

.xian {
  width: 4px;
  height: 16px;
  background: #6675ff;
  margin-left: 20px;
  border-radius: 10px;
}
.text {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  margin-left: 10px;
}
</style>
